<template>
  <div>
    <div style="min-height: 100vh;background:#f5f5f5;position:relative;overflow:hidden" class="shopChart">
      <div class="chartTop">
        <p>购物车</p>
        <span v-if="!isManage" @click="switchManage">管理</span>
        <span v-else @click="switchManage">完成</span>
      </div>

      <div v-if="isGet" style="margin-top:45px;height:86vh;overflow: scroll">
        <van-checkbox-group v-model="result" v-if="list.length>0" @change="checkedChange">
          <van-checkbox
            v-for="(item,index) in list"
            :name="item.cart_id"
            :key="index"
            checked-color="#ff4c50"
            label-disabled>
            <a :href="'/pages/detail/main?type='+item.activity_type+'&group_id=0&limit_id=0&join_id=0&goods_id='+item.goods_id+'&activity_id='+item.activity_id">
              <div style="float:right;width: 77.5vw">
                <span class="goodsPic"><img :src="item.goods_img" alt=""></span>
                <div class="msg">
                  <p class="goodsTitle">{{item.goods_name}}</p>
                  <p class="goodsSku">{{item.spec_array}}</p>
                  <p class="goodsChioce">
                    <span>￥{{item.finnal_price}}</span>
                  </p>
                  <div class="jiangjia">
                    {{item.price_difference}}
                  </div>
                </div>
              </div>
            </a>
            <div style="width:8px;position:absolute;top: 20px;right: 5px">
              <img src="/static/img/Shape.png" style="width:8px;" v-if="isManage" @click="delCart(item.cart_id)"/>
            </div>
            <!--<span style="float:right;margin-top: -9vw">-->
            <span style="float:right;position:absolute;right: 3px;top:55px">
              <van-stepper v-model="item.goods_num" disable-input integer @change="stepChange" @plus="onPlus(item.cart_id)" @minus="onminus(item.cart_id)"/>
            </span>
          </van-checkbox>
        </van-checkbox-group>
        <div v-else>
          <div class="listNone" v-if="isNone">
            <img src="/static/img/lackicon.png" style="width: 50vw"/>
            <p>您的购物车还是空空的哦~</p>
          </div>
        </div>
      </div>
      <div v-if="list.length>0">
        <van-submit-bar
        :price="allMoney"
        button-text="结算"
        v-if="!isManage"
        @submit="onSubmit">
        <van-checkbox v-model="checked"  checked-color="#ff4c50" style="margin-left: 4vw" @change="allChecked">全选</van-checkbox>
      </van-submit-bar>
      <div v-else class="submitBar">
        <van-checkbox v-model="checked" checked-color="#ff4c50" style="margin-left: 4vw;float:left" @change="allChecked">全选</van-checkbox>
        <div class="submitButton">
          <button style="width:80px;background:#333333" @click="delCart(0)">删除</button>
        </div>
      </div>
      </div>

    </div>
  </div>
</template>

<script>
  import request from '@/actions/request.js'
  export default {
    name: "shopChart",
    data() {
      return {
        data:{list:[]},
        result:[],
        isManage: false,
        checked: false,
        allMoney:0,
        cart_id:'',
        types:4,
        isNone:false,
        list:[],
        isGet:false
      }
    },
    onReady(){

    },
    watch:{
      result(newVal,oldVal){
        if((this.list.length==newVal.length)&&(this.list.length)){
          this.checked=true;
        }else{
          this.checked=false;
        }
        this.sumAllmoney();
      },
    },
    onShow(){
      this.isGet = false;
      this.list=[];
      this.result=[];
      this.checked=false;
      request.cartList('api/goods/cartList','post',{},{},false,this);

    },
    onUnload(){
      this.list=[];
    },
    methods:{
      checkedChange(e){
        this.result=e.mp.detail;
      },
      sumAllmoney(){
        this.allMoney=0;
        this.result.forEach((v,i) => {
          this.list.forEach((v1,i1)=>{
            if(v1.cart_id==v){
              this.allMoney+=v1.finnal_price*v1.goods_num*100
            }
          })
        });
      },
      stepChange(e){

      },
      allChecked(e){
        this.checked=e.mp.detail;
        if(this.checked){
          this.result=[];
          this.list.forEach((v,i)=>{
            this.result.push(''+v.cart_id)
          })
        }else{
          this.result=[];
        }
      },
      delCart(cartId){
        var that=this;
        if(cartId){
          this.list.forEach((v,j) => {
            if(v.cart_id==cartId){
              this.list.splice(j,1);
            }
          });
          console.log(this.list)
          request.delCart("api/goods/delCart",'post',{
            cart_id:cartId
          },{},true,this)
          this.$forceUpdate();
        }else{
          if(this.result.length>0){
            var cartIds='';
            this.result.forEach((v,i)=>{
              if(i==0){
                cartIds=cartIds+this.result[i];
              }else{
                cartIds=cartIds+','+this.result[i]
              }
            });
            var cartIdsList=cartIds.split(',');
            cartIdsList.forEach((value,index)=>{
              this.list.forEach((v,j) => {
                if(v.cart_id==value){
                  this.list.splice(j,1);
                }
              });
            });
            this.result=[];
            console.log(this.list)
            request.delCart("api/goods/delCart",'post',{
              cart_id:cartIds
            },{},true,this)
            this.$forceUpdate();
          }else{
            wx.showToast({
              title: '请选择商品',
              icon: 'none',
              duration: 2000
            })
          }
        }

      },
      onPlus(cartId){
        request.updateCart('api/goods/updateCart','post',{
          type:1,
          cart_id:cartId
        },{},true,this);
      },
      onminus(cartId){
        request.updateCart('api/goods/updateCart','post',{
          type:2,
          cart_id:cartId
        },{},true,this);
      },
      switchManage(){
        this.isManage=!this.isManage;
      },
      onSubmit(){
        if(this.result.length){
          var that=this;
          this.result.forEach((v,i)=>{
            if(i==0){
              this.cart_id=v;
            }else{
              this.cart_id=this.cart_id+','+v
            }
          })
          request.buyGoods("api/order/beforeOrder","post",{
            type:this.types,
            goods_id:this.goods_id,
            spec_id:this.specId,
            goods_number:this.chooseNum,
            article_id:this.article_id,
            limit_id:this.limit_id,
            group_type:this.normalGoodsType,
            group_id:this.group_id,
            join_id:this.join_id,
            cart_id:this.cart_id,
            activity_id:this.activity_id,
          },{},true,this)
        }else{
          wx.showToast({
            title: '请选择商品',
            icon: 'none',
            duration: 2000
          })
        }
      }
    },
    mounted() {
      // request.cartList('api/goods/cartList','post',{},{},true,this);
    },
  }
</script>

<style scoped lang="scss">
  .goodsTitle{
    height:3em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height:1.5em;
  }
  .van-submit-bar{
    bottom: 50px!important;
    border-bottom: 1px solid #f5f5f5;
  }
  .submitBar{
    position: fixed;
    bottom: 0;
    width: 100%;
    height:100rpx;
    line-height: 72rpx;
    background: #ffffff;
    // padding: 5px 0;
    .submitButton{
      float:right;
      // border-radius: 50px;
      overflow: hidden;
      // margin-right: 4vw;
      margin:1.3vw 2vw 0 0;
      button{
        float:right;
        color: #ffffff;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }
    }
  }
  .chartTop{
    background: #FF3C73;
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    position: fixed;
    top: 0px;
    width: 100vw;
    z-index: 2;
    span{
      position: absolute;
      right: 4vw;
      top: 0;
      font-size: 15px;
    }
  }
  .goodsPic{
    width: 21.3vw;
    height: 21.3vw;
    display: inline-block;
    line-height: 80px;
    border: solid #efefef 1px;
    border-radius: 5px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;

    }
  }
  .msg{
    float:right;
    color: #333333;
    font-size: 12px;
    margin-left: 10px;
    width: 53vw;
    position: relative;
    .goodsChioce{
      color: #FF5230;
      font-size: 12px;
    }
    .jiangjia{
      font-size: 12px;
      color: #ff4c50;

    }

  }
  .listNone{
    text-align: center;
    padding-top: 150px;
  }
</style>
<style lang="scss">
  .shopChart{
    .van-checkbox{
      background:#fff;
      padding:5px;
      margin-bottom:10px;
      position:relative;
    }
  }
</style>
